<template>
    <div class="actualWrap" id="actualWrap">
        <div class="indexBox" id="indexBox">
            <slot/>
        </div>
    </div>
</template>

<script>
import {onMounted} from 'vue'
export default {
    components:{
        
    },
    setup() {
        onMounted(() =>{
            window.onresize = ()=>{
              scalePage()  
            }
            scalePage() 
        })

        const scalePage = ()=>{  // 缩放页面
            const ele = document.getElementById('indexBox')
            const w = window.innerWidth,h = window.innerHeight
            const actual_ele = document.getElementById('actualWrap')
            actual_ele.style.width = w+'px'
            actual_ele.style.height = h+'px'

            const rate = 1920/1080
            if(w!=1920 || h!=1080){ // 对网页进行缩放（网页按照1920*1080设计的）
                const new_rate = w/h
                let w_rate=1,h_rate=1
                
                if(new_rate>rate){ // 按照高度比例缩放
                    h_rate = h/1080  // 高度需要缩放的比例
                    w_rate = h_rate  // 宽度需要缩放的比例
                    ele.style['transform-origin'] = 'left top'// 设置缩放后的位置
                    ele.style.transform = `scale(${w_rate},${h_rate})`

                    const w_last = 1920 * w_rate  // 缩放后的宽度
                    ele.style['margin-left'] = `${(w-w_last)/2}px`
                }else{ // 按照宽度
                    w_rate = w/1920  // 宽度需要缩放的比例
                    h_rate = w_rate  // 高度需要缩放的比例
                    ele.style['transform-origin'] = '0 0'// 设置缩放后的位置
                    ele.style.transform = `scale(${w_rate},${h_rate})`
                    ele.style['margin-left'] = '0px'
                }
                
            }else{
               ele.style = '' 
            }
        } 
    },
}
</script>

<style lang="scss" scoped>
    .actualWrap{
        overflow: hidden;
    }
    .indexBox{
        position: relative;
        z-index: 100;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        margin: 0 auto;
       // transform-origin: 50% 0;  // scale缩放后水平居中，
        // width: 100%;
        // height: 100%;
        // overflow: hidden;
        // transform: scale(0.5,0.5);
        // -ms-transform: scale(0.5,0.5); 
        // -webkit-transform: scale(0.5,0.5); 
    }
</style>